<template>
  <div id="wrapper">
    <div class="titleStyle">
      <span>
        接口信息选择
      </span>
    </div>
    <el-form ref="form" :model="selectedData" label-width="80px">
      <el-form-item label="服务器">
        <el-select style="width: 800px" filterable v-model="selectedData.serverHost" placeholder="请选择服务器">
          <el-option v-for="item in allServer" :label="item.host" :value="item.host"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="接口">
        <el-select @change="changeApi" style="width: 800px" filterable v-model="selectedData.apiId" placeholder="请选择接口">
          <el-option v-for="item in allOpenApi" :label="item.apiName + ' ' + apiTypes[item.apiType] + ' ' + item.apiUrl" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div class="titleStyle">
      <span>
        QUERY PARAMETERS
      </span>
    </div>
    <dev class="queryStyle">
      <div class="queryItem" v-for="item in queryData">
        <el-row :gutter="3">
          <el-col :span="4">
            <el-input v-model="item.field" placeholder="字段名称" size="mini"/>
          </el-col>
          <el-col :span="3">
            <el-select style="width: 100%" size="mini" v-model="item.required" placeholder="必填">
              <el-option
                  v-for="item in queryFileTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="6">
            <el-input placeholder="参数示例" v-model="item.example" size="mini"/>
          </el-col>
          <el-col :span="10">
            <el-input placeholder="备注" v-model="item.remarks" size="mini"/>
          </el-col>
          <el-col :span="1" class="queryItemDelete">
            <i @click="queryDelete(item)" class="el-icon-delete"/>
          </el-col>
        </el-row>
      </div>
    </dev>
  </div>
</template>

<script>
export default {
  name: "OpenApiTest",
  data: function() {
    return {
      selectedData: {
        serverHost: null,
        apiId: null
      },
      // 接口基础参数
      baseData: {
        apiName: '',
        apiClassify: '',
        apiType: 1,
        apiUrl: '',
        createUserName: '',
        updateTime: '',
        createTime: '',
        lastUpdateUserName: ''
      },
      // 备注
      remarks: '',
      // Query参数parameter
      queryData: [
        // {
        //   id: 0,
        //   field: '',
        //   required: 0,
        //   example: '',
        //   remarks: ''
        // }
      ],
      // 请求头数据
      headersData: [
        {
          id: 0,
          key: '',
          value: '',
          example: '',
          remarks: ''
        }
      ],
      // 选择请求的类型,1json 0form
      selectRequestType: 1,
      // form表单的数据格式
      formData: [
        {
          id: 0,
          field: '',
          fieldType: 0,
          required: 0,
          example: '',
          remarks: ''
        }
      ],
      // form表单的类型
      formFieldTypes: {
        0: '文本',
        1: '文件'
      },
      // 请求的json参数
      requestJsonData: [{
        id: 1,
        field: 'root',
        required: true,
        fieldType: 3,
        remarks: null,
        disabled: true,
        append: false,
        children: []
      }],
      // 请求的json参数
      oldRequestJsonData: [{
        id: 1,
        field: 'root',
        required: true,
        fieldType: 3,
        remarks: null,
        disabled: true,
        append: false,
        children: []
      }],
      // 响应的json参数
      responseJsonData: [{
        id: 1,
        field: 'root',
        required: true,
        fieldType: 3,
        remarks: null,
        disabled: true,
        append: false,
        children: []
      }],
      oldResponseJsonData: [],
      // 接口类型
      apiTypes: {
        0: 'GET',
        1: 'POST',
        2: 'PUT',
        3: 'DELETE',
        4: 'HEAD',
        5: 'OPTIONS',
        6: 'PATCH'
      },
      required: {
        1: '是',
        0: '否'
      },
      // json参数类型
      fileTypes: {
        0: 'string',
        1: 'number',
        2: 'array',
        3: 'object',
        4: 'boolean',
        5: 'integer',
        10: 'string []',
        11: 'number []',
        12: 'array []',
        13: 'object []',
        14: 'boolean []',
        15: 'integer []',
        22: 'array [][]'
      },
      // 所有的openapi接口
      allOpenApi: [],
      // 所有的服务器
      allServer: [],
      // Query参数类型 0非必须 1必须
      queryFileTypes: [
        {
          value: 0,
          label: "非必须"
        },
        {
          value: 1,
          label: "必须"
        }
      ],
    }
  },
  methods: {
    /**
     * 通过id查询详情
     */
    async getById(id) {
      let res = await this.$http.get('/api/apiManage/getById?id=' + id)
      this.baseData.apiName = res.data.apiName
      this.baseData.apiClassify = res.data.apiClassify
      this.baseData.apiType = res.data.apiType
      this.baseData.apiUrl = res.data.apiUrl
      this.baseData.createUserName = res.data.createUserName
      this.baseData.lastUpdateUserName = res.data.lastUpdateUserName
      this.baseData.updateTime = res.data.updateTime
      this.baseData.createTime = res.data.createTime
      this.remarks = res.data.remarks
      this.queryData = res.data.queryParameter
      this.headersData = res.data.headers
      this.selectRequestType = res.data.requestBody.requestBodyType
      this.formData = res.data.requestBody.form
      this.requestJsonData = res.data.requestBody.json
      this.responseJsonData = res.data.response
      if (this.selectRequestType == 0) {
        let node = {
          id: new Date().getTime(),
          key: 'Content-Type',
          value: 'application/x-www-form-urlencoded'
        }
        if (this.headersData == undefined) {
          this.headersData = []
        }
        this.headersData.unshift(node)
      } else {
        let node = {
          id: new Date().getTime(),
          key: 'Content-Type',
          value: 'application/json'
        }
        if (this.headersData == undefined) {
          this.headersData = []
        }
        this.headersData.unshift(node)
      }
    },
    /**
     * 查询所有openapi接口
     */
    async getAllOpenApi() {
      let res = await this.$http.get('/api/apiManage/allOpenApi')
      this.allOpenApi = res.data
    },
    /**
     * 查询所有服务器
     */
    async getAllServer() {
      let res = await this.$http.get('/api/serverInfo/all')
      this.allServer = res.data
    },
    /**
     * 切换id
     */
    changeApi(id) {
      this.getById(id)
    }
  },
  activated: function(){
    this.selectedData.apiId = this.$router.currentRoute.query.id
    if (this.selectedData.apiId != null) {
      this.getById(this.selectedData.apiId)
    }
    this.getAllOpenApi()
    this.getAllServer()
  }
}
</script>

<style lang="scss" scoped>
.titleStyle{
  border-left: 3px solid #409EFF;
  padding: 5px;
  margin-top: 8px;
  margin-bottom: 8px;
  span{
    font-size: 16px;
    color: #303133;
  }
}
.queryItem{
  margin-bottom: 5px;
}
</style>
